<template>
  <div id="app-body" class="bodyPage">
    <!-- <div class="largeHead">
      <div class="header-title">数字防灾驾驶舱</div>
    </div> -->
    <div class="largeBody">
      <div class="body-left">
        <div class="mainEarlyWarning">
          <div class="title">聊城预警</div>
          <div class="main">
            {{ mainEarlyWarningList.join(",") }}
          </div>
        </div>
        <div class="otherEarlyWarning">
          <div class="title">上游地区预警</div>
          <div class="main">
            {{ otherEarlyWarningList.join(",") }}
          </div>
        </div>
        <!-- <early-waring keys="main" title="聊城预警" :warning-list="mainEarlyWarningList"></early-waring>
        <early-waring keys="other" style="margin-top: 20px" title="上游城市预警"
                      :warning-list="otherEarlyWarningList"></early-waring> -->
      </div>
      <div class="body-right">
        <div class="body-right-top">
          <div class="map3D">
            <map3D @mapClick="mapClick" />
          </div>
          <div class="mapInfo" v-if="mapInfoShow">
            <div style="margin: 0.6rem 0.8rem; color: #ffffff; font-size: 1rem">
              {{ mapInfoObj.name }}
              <span style="font-size: 0.8rem">
                {{ formatDate(mapInfoObj.obsTime) }}
              </span>
            </div>
            <div class="textStyle">
              当日天气
              <span style="color: rgb(56, 204, 125); margin-left: 1.5rem">
                {{ mapInfoObj.text }}
              </span>
            </div>
            <div class="textStyle">
              当日气温
              <span style="color: rgb(56, 204, 125); margin-left: 1.5rem">
                {{ mapInfoObj.temp }}℃
              </span>
            </div>
            <div class="textStyle">
              降雨量
              <span style="color: rgb(56, 204, 125); margin-left: 1.5rem">
                {{ mapInfoObj.precip }}mm
              </span>
            </div>
            <div class="textStyle">
              最大风速
              <span style="color: rgb(56, 204, 125); margin-left: 1.5rem">
                {{ mapInfoObj.windDir }}{{ mapInfoObj.windScale }}级
              </span>
            </div>
            <div class="textStyle">
              能见度
              <span style="color: rgb(56, 204, 125); margin-left: 1.5rem">
                {{ mapInfoObj.vis }}
              </span>
            </div>
          </div>
          <div class="environment">
            <image-title title="聊城24小时天气情况"></image-title>
            <div class="environment-list">
              <vue-seamless-scroll
                style="width: 100%; height: 100%"
                :data="dataList"
                :class-option="classOption"
              >
                <div
                  class="environment-item"
                  v-for="(item, index) in dataList"
                  :key="index"
                >
                  <div>{{ formatDate(item.fxTime) }}</div>
                  <div>聊城市</div>
                  <div>{{ item.text }}</div>
                  <div class="js-item">{{ item.humidity }}%</div>
                  <div class="item">{{ item.temp }}℃</div>
                  <div class="item">{{ item.windDir }}</div>
                </div>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
        <div class="body-right-bottom">
          <div ref="weatherForecast" class="weatherForecast"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pageResize } from "../utils/resetSize";
import earlyWaring from "./components/large-screen/early-warning";
import * as echarts from "echarts";
import imageTitle from "./components/large-screen/image-title";
import vueSeamlessScroll from "vue-seamless-scroll";
import map3D from "@/views/components/map3D/index.vue";
import {
  warnIngInfo,
  weatherInfo,
  weatherInfoForSeenDay,
  weatherInfoForTreeHons,
} from "@/api/cityInfo";
import { formatDate, formatDateMonth } from "../utils";
import { cityInformation } from "@/utils/city-information";

export default {
  name: "largeScreen",
  components: {
    earlyWaring,
    imageTitle,
    vueSeamlessScroll,
    map3D,
  },
  data() {
    return {
      mainEarlyWarningList: [],
      otherEarlyWarningList: [],
      activeName: "second",
      dataList: [],
      futureWeatherFifteenList: [],
      lcList: [
        "临清",
        "莘县",
        "东昌府",
        "高唐",
        "阳谷",
        "东阿",
        "茌平",
        "冠县",
      ],
      cityInformation: [
        { name: "冠县", id: "101121702" },
        { name: "阳谷县", id: "101121703" },
        { name: "高唐县", id: "101121704" },
        { name: "茌平区", id: "101121705" },
        { name: "东阿县", id: "101121706" },
        { name: "临清市", id: "101121707" },
        { name: "莘县", id: "101121709" },
        { name: "东昌府区", id: "101121708" },
      ],
      companyList: [],
      mapInfoShow: true,
      mapInfoObj: {},
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.dataList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000,
      };
    },
  },
  mounted() {
    this.getCityWeatherToday();
    this.getEarlyWarningList();
    this.getCtiyWearthInfo();
    this.getFutureWeatherForFifteen();
    this.$nextTick(() => {
      pageResize(true);
    });
  },
  methods: {
    formatDate,
    //获取聊城市区县当日天气信息
    async getCityWeatherToday() {
      this.cityInformation.map(async (item) => {
        let resJson = await weatherInfo({
          location: item.id,
          lang: "zh",
          cityName: item.name,
        });
        let res = await JSON.parse(resJson.data);
        this.companyList.push({
          ...item,
          ...res.now,
        });
        if (this.cityInformation.length == this.companyList.length) {
          this.mapClick("东昌府区");
        }
      });
    },
    //获取信息预警
    async getEarlyWarningList() {
      //请求接口
      let data = localStorage.getItem("companyYjList");
      let list = [];
      if (data == null) {
        cityInformation.map(async (item) => {
          let resJson = await warnIngInfo({
            location: item.id,
            lang: "zh",
            cityName: item.name,
          });
          let res = await JSON.parse(resJson.msg);
          if (res.warning.length != 0) {
            list.push({
              ...item,
              warning: res.warning[0],
            });
          } else {
            list.push({ ...item });
          }
          if (cityInformation.length == list.length) {
            this.setYjData(list);
          }
        });
      } else {
        list = JSON.parse(localStorage.getItem("companyYjList"));
        this.setYjData(list);
      }
    },
    setYjData(list) {
      list.forEach((item) => {
        if (item.warning) {
          if (this.lcList.indexOf(item.name) != -1) {
            this.mainEarlyWarningList.push(item.warning.text);
          } else {
            this.otherEarlyWarningList.push(item.warning.text);
          }
        }
      });
      if (this.mainEarlyWarningList.length == 0) {
        this.mainEarlyWarningList.push("暂无数据");
      }
      if (this.otherEarlyWarningList.length == 0) {
        this.otherEarlyWarningList.push("暂无数据");
      }
    },
    //获取聊城所有市区的天气信息
    async getCtiyWearthInfo() {
      // let httpUrl = 'https://api.seniverse.com/v3/weather/hourly.json?key=SfOcYG07nsrQQ2w8G&location=liaocheng&language=zh-Hans&unit=c&start=0&hours=24'
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // this.dataList = res.results[0].hourly

      let resJson = await weatherInfoForTreeHons({
        location: "101121701",
        lang: "zh",
        cityName: "聊城",
      });
      let res = JSON.parse(resJson.data);
      this.dataList = res.hourly;
    },
    async getFutureWeatherForFifteen() {
      // let httpUrl = 'https://api.seniverse.com/v3/weather/daily.json?key=SfOcYG07nsrQQ2w8G&location=liaocheng&language=zh-Hans&unit=c&start=0&days=15'
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // this.futureWeatherFifteenList = res.results[0].daily
      // await this.chartInit()

      let resJson = await weatherInfoForSeenDay({
        location: "101121701",
        lang: "zh",
        cityName: "聊城",
      });
      let res = JSON.parse(resJson.data);
      this.futureWeatherFifteenList = res.daily;
      await this.chartInit();
    },
    chartInit() {
      let date = [];
      let jsDate = [];
      let qwDate = [];
      this.futureWeatherFifteenList.forEach((item) => {
        date.push(formatDateMonth(item.fxDate));
        jsDate.push(Number(item.precip));
        qwDate.push(Number(item.tempMin));
      });
      const chartItem = this.$refs.weatherForecast;
      let myChart = echarts.init(chartItem);
      let option = {
        grid: [
          {
            top: "12%",
            bottom: "50%",
            left: "5%",
            right: "8%",
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: false },
          },
        },
        xAxis: [
          {
            type: "category",
            data: date,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              color: "#88a4cb", // 将X轴单位颜色改为#15599D
            },
            axisLine: {
              lineStyle: {
                color: "#88a4cb", // 将X轴线颜色改为#88a4cb
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "气温",
            // min: 0,
            // interval: 5,
            nameTextStyle: {
              color: "#fff", // 将Y轴标识颜色改为白色
            },
            axisLabel: {
              formatter: "{value} °C",
              color: "#88a4cb", // 将Y轴单位颜色改为#15599D
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#15599D",
              },
            },
          },
          {
            type: "value",
            name: "降水量",
            nameTextStyle: {
              color: "#fff", // 将Y轴标识颜色改为白色
            },
            min: 0,
            interval: 50,
            axisLabel: {
              formatter: "{value} ml",
              color: "#88a4cb", // 将Y轴单位颜色改为#15599D
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#15599D",
              },
            },
          },
        ],
        series: [
          {
            name: "气温",
            type: "line",
            yAxisIndex: 0, // 左侧Y轴
            smooth: true, // 使折线圆润
            // symbol: "none", // 隐藏数据点标记
            tooltip: {
              valueFormatter: function (value, dataIndex) {
                return value + " °C";
              },
            },
            itemStyle: {
              color: "#4DAF73", // 设置折线颜色
            },
            data: qwDate,
          },
          {
            name: "降水量",
            type: "bar",
            yAxisIndex: 1, // 右侧Y轴
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#21DAE9", // 顶部颜色
                  },
                  {
                    offset: 1,
                    color: "#0D315B", // 底部颜色
                  },
                ],
              },
              barBorderRadius: [10, 10, 0, 0], // 圆柱顶端为半圆形
            },
            data: jsDate,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    mapClick(name) {
      this.companyList.forEach((item) => {
        if (item.name == name) {
          this.mapInfoObj = item;
          this.mapInfoShow = true;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.bodyPage {
  width: 100%;
  height: 100vh;
  .largeBody {
    display: flex;
    width: 100%;
    height: 100vh;
    // padding: 1.43rem 2.79rem 3.36rem 2.79rem;
    .body-left {
      width: 18%;
      height: 100%;
      background-color: #464951;
      display: flex;
      flex-flow: column;
      align-items: center;
      padding-top: 1vh;
      color: #fff;
      .mainEarlyWarning,
      .otherEarlyWarning {
        width: 286px;
        height: 38vh;
        background: #000e7d;
        border: 1px solid #707070;
        margin-top: 1vh;
        > .title {
          width: 100%;
          height: 5vh;
          font-size: 18px;
          line-height: 40px;
          padding-left: 0.5vw;
          background: linear-gradient(143deg, #f28d10 0%, #000e7d 100%);
          border-bottom: 1px solid #707070;
        }
        > .main {
          width: 100%;
          height: 33vh;
          padding: 0 0.5vw;
          padding-top: 1vh;
          font-size: 16px;
          overflow: auto;
        }
      }
      .otherEarlyWarning {
        margin-top: 3vh;
        > .title {
          background: linear-gradient(143deg, #119afa 0%, #000e7d 100%);
        }
      }
    }
    .body-right {
      width: 82%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #041b3d;
      .body-right-top {
        width: 100%;
        height: 65%;
        // background: salmon;
        position: relative;
        // display: flex;
        .map3D {
          width: 100%;
          height: 100%;
          background: url("../assets/images/jiashicang.png") no-repeat;
        }
        // .map {
        //   width: 85%;
        //   height: 100%;
        //   background-image: url("../assets/images/jiashicang.png");
        //   background-size: 100% 135%;

        // }
        .mapInfo {
          position: absolute;
          left: 40px;
          top: 10px;
          z-index: 100;
          .textStyle {
            // background-color: rgba(6, 62, 112, 0.3);
            padding: 0.5rem 1.5rem;
            margin: 0.8rem 1rem;
            border-radius: 0.8rem;
            color: rgb(64, 158, 218);
            font-weight: bold;
          }
        }
        .environment {
          width: 500px;
          height: 63vh;
          position: absolute;
          right: 90px;
          top: 0;
          z-index: 100;
          display: flex;
          flex-direction: column;
          .environment-item {
            display: flex;
            align-items: center;
            color: #fff;
            margin-bottom: 10px;
            font-size: 0.8rem;
            justify-content: space-between;

            div {
              margin-right: 5px;
            }

            .item {
              background: rgba(11, 151, 71, 0.92);
              box-shadow: 0 0 16px 0 rgba(11, 151, 71, 0.92);
              border-radius: 20px;
              padding: 2px 10px;
              border: 1px solid #1ebd67;
            }

            .js-item {
              background: rgba(30, 156, 174, 0.92);
              box-shadow: 0 0 16px 0 rgba(30, 156, 174, 0.92);
              border-radius: 20px;
              padding: 2px 10px;
              border: 1px solid #1e9cae;
            }
          }

          .environment-list {
            width: 100%;
            height: 88%;
            margin-top: 2%;
            overflow-y: scroll;
            scrollbar-width: none;
          }

          .environment-list::-webkit-scrollbar {
            display: none; /* 对于Chrome, Safari和Opera */
          }
        }
      }
      .body-right-bottom {
        width: 100%;
        height: 32%;
        // background: salmon;
        .weatherForecast {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.largeHead {
  width: 100%;
  height: 7.31%;
  background: url("../assets/large_screen/headerOne.png") no-repeat center;
  background-size: 97.48% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.header-title {
  margin-left: 3rem;
  font-size: 1.625rem;
  background: -webkit-linear-gradient(#e8eef7, #7dbade);
  // -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: bolder;
  letter-spacing: 0.14rem;
  font-family: HYk2gj;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: #041b3d !important;
}

::v-deep .el-tabs__item {
  color: #d2e1f8;
}

::v-deep .el-tabs__item.is-active {
  color: #2ca2ef;
}
</style>
